<template>
	<div id="OnlineMessage" class="bg3e8">
		<el-card class="w1200 card p25">
			<h1>在线留言</h1>
			<div class="body">
				<div class="OnlineMessagebody">
					<el-form
						:model="ruleForm"
						:rules="rules"
						ref="ruleForm"
						label-width="100px"
						class="demo-ruleForm"
					>
						<el-form-item label="留言人姓名" prop="name">
							<el-input v-model="ruleForm.name" placeholder="请输入留言人姓名"></el-input>
						</el-form-item>
						<el-form-item label="手机号码" prop="PhoneNumber">
							<el-input v-model="ruleForm.PhoneNumber" placeholder="请输入手机号码"></el-input>
						</el-form-item>
						<el-form-item label="验证码" prop="VerificationCode">
							<el-row type="flex" :gutter="20">
								<el-col :span="16">
									<el-input
										v-model="ruleForm.VerificationCode"
										placeholder="请输入验证码"
									></el-input>
								</el-col>
								<el-col :span="8">
									<div id="Codetest" class="code" @click="refreshCode">
										<sidentify :identifyCode="identifyCode"></sidentify>
									</div>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item label="留言内容" prop="MessageContent">
							<el-input
								type="textarea"
								v-model="ruleForm.MessageContent"
								placeholder="请输入留言内容"
								maxlength="300"
								show-word-limit
								:rows="12"
							></el-input>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
				<!-- <img
          src="https://n.sinaimg.cn/sinakd10111/180/w600h380/20210609/96e4-krhvrxt1172562.png"
          alt=""
          srcset=""
        /> -->
				<img src="http://public.znrdtech.cn/images/CustomerServiceDiagram.jpg" alt="" />
			</div>
		</el-card>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import sidentify from '@/components/Identify.vue'
import axios from 'axios'
import qs from 'qs'
export default {
	// import引入的组件需要注入到对象中才能使用
	components: {sidentify},
	props: {},
	data() {
		// 这里存放数据
		let validatePhone = (rule, value, callback) => {
			if (!value) {
				callback(new Error('手机号不能为空！'))
			}
			//正则表达式
			if (!/^1[3456789]\d{9}$/.test(value)) {
				callback(new Error('手机号不正确！'))
			}
		}
		return {
			ruleForm: {
				name: '',
				MessageContent: '',
				PhoneNumber: '',
				VerificationCode: ''
			},
			rules: {
				name: [
					{required: true, message: '请输入留言人姓名!', trigger: 'blur'},
					{min: 3, max: 5, message: '长度在 3 到 5 个字符!', trigger: 'blur'}
				],
				PhoneNumber: [
					{required: true, validator: validatePhone, trigger: 'blur'},
					{min: 12, max: 13, message: '长度在 12 到 13 个字符!', trigger: 'blur'}
				],
				MessageContent: [{required: true, message: '请输入留言内容!', trigger: 'blur'}],
				VerificationCode: [
					{required: true, message: '请输入验证码!', trigger: 'blur'},
					{min: 4, max: 4, message: '长度为4字符!', trigger: 'blur'}
				]
			},
			identifyCodes: '1234567890',
			identifyCode: ''
		}
	},
	computed: {}, // 计算属性 类似于data概念
	watch: {}, // 监控data中的数据变化
	methods: {
		submitForm(formName) {
			if (this.ruleForm.VerificationCode == this.identifyCode) {
				var url = '/api/MessageList'
				var data = qs.stringify(this.ruleForm)
				axios({
					url,
					data: data,
					method: 'post',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					console.log(res)
				})
				this.$refs[formName].validate(valid => {
					if (valid) {
						alert('submit!')
					} else {
						return false
					}
				})
			} else {
				this.$message({
					showClose: true,
					message: '验证码错误！！！',
					type: 'error'
				})
			}
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		},
		randomNum(min, max) {
			return Math.floor(Math.random() * (max - min) + min)
		},
		refreshCode() {
			this.identifyCode = ''
			this.makeCode(this.identifyCodes, 4)
		},
		makeCode(o, l) {
			for (let i = 0; i < l; i++) {
				this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
			}
		}
	}, // 方法集合
	created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
	mounted() {
		this.identifyCode = ''
		this.makeCode(this.identifyCodes, 4)
	}, // 生命周期 - 挂载完成（可以访问DOM元素）
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
#OnlineMessage {
	width: 100%;
	padding: 25px 0;
	.card {
		// min-height: 600px;
		background-color: white;
		box-sizing: border-box;
		h1 {
			margin: 0 0 25px;
			padding-bottom: 0.3em;
			border-bottom: 1px solid hsla(210, 18%, 87%, 1);
		}
		.body {
			display: flex;
			justify-content: space-between;
			.OnlineMessagebody {
				width: 575px;
				.code {
					width: 140px;
					height: 32px;
					border: 1px solid red;
				}
			}

			.OnlineMessagebody /deep/ .el-form-item__label {
				text-align: center;
			}
			img {
				width: 550px;
				height: 400px;
				float: left;
			}
		}
	}
}
</style>
